<template>
  <div>
    <SelfAdaption>
      <Form
        :model="formSearch"
        ref="userFormSearch"
        slot="adaption-bar"
        label-position="top"
        inline
      >
        <template>
          <!-- 用户账号 -->
          <Form-item prop="id" :label="$t('module.userManage.account')">
            <Input
              type="text"
              v-model.trim="formSearch.id"
              :placeholder="$t('common.warning.input') + $t('module.userManage.account')"
              @on-enter="searchInfo"
            ></Input>
          </Form-item>

          <!-- 用户名称 -->
          <Form-item prop="name" :label="$t('module.userManage.name')">
            <Input
              type="text"
              v-model.trim="formSearch.name"
              :placeholder="$t('common.warning.input') + $t('module.userManage.name')"
              @on-enter="searchInfo"
              :maxlength="30"
            ></Input>
          </Form-item>
          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="searchInfo" />
            <RPButton optType="reset" @click="formReset" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="userTable" :config="pageTableConfig">
      <div slot="table-bar">
        <RPButton optType="create" @click="createUserInfo" />
        <RPButton optType="delete" @click="deleteUser" />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import locales from "./locales.js";
import UserEdit from "./UserEdit.vue";
import { generateColumns } from "./colomns";
import userManageAPI from "@/api/userManageApi";

const RIPPLES = "ripples";
export default {
  name: "user-list",
  mixins: [locales],
  data() {
    return {
      formSearch: {
        id: "",
        name: "",
      },
      pageTableConfig: {
        loadDataFn: this.getUserListPage,
        columns: generateColumns.bind(this)(),
        autoFirst: true,
        selectionAreaItem: { key: "id", title: "userName" },
        allSelection: []
      },
    };
  },
  created() {},
  computed: {},
  methods: {
    // 列表编辑按钮方法
    editUserInfo(userInfo) {
      this.openEditModel({ userInfo });
    },
    openEditModel(props = {}) {
      new this.$pageModal(
        UserEdit,
        {
          props: {
            userInfo: props.userInfo,
          }
        },
        data => {
          if (data) {
            this.search(this.$refs.userTable.param.pageNum);
          }
        }
      );
    },
    // 创建用户
    createUserInfo() {
      this.openEditModel();
    },
    // 搜索查询
    searchInfo() {
      this.$refs["userTable"].load(this.formSearch);
    },
    // 搜索重置
    formReset() {
      this.$refs["userFormSearch"].resetFields();
      this.searchInfo();
    },
    // 刷新数据
    search(page = 1) {
      this.$refs["userTable"].load(Object.assign({}, this.formSearch), page);
    },
    
    getUserListPage: tableObj => {
      let { responseProcess, param } = tableObj;
      return userManageAPI.getUserListPage(param).then(data => {
        responseProcess(data);
      });
    },
    deleteUser() {
      let allSelected = this.$refs["userTable"].allSelection;
      if (allSelected.length == 0) {
        this.$message.error(this.$t("common.warning.selctElement"));
        return;
      }
      this.$confirm({
        content: this.$t("common.warning.confirmToDelete")
      })
        .then(() => {
          const ids = allSelected.map(user => user.id);
          userManageAPI.deleteUsers(ids).then(res => {
            this.$message.success({
              content: this.$t("common.deleteSuccess"),
              duration: 3
            });
            this.$refs["userTable"].allSelection = [];
            this.search();
          });
        })
        .catch(_ => _);
    }
  }
};
</script>

<style lang="less">
</style>
